<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>

<body>
  <input type="text" id="ipt" placeholder="输入内容">
  <script>
    // 就是指触发事件后在 n 秒内函数只能执行一次
    // 如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

    // 目的是减小请求频次，特点是停止输入n秒后才会发起一次请求
    let ipt = document.querySelector('#ipt')
    function read() {
      console.log(this.value);
    }
    function debounce(fn, wait, immediate) {
      let timeout;
      return function () {
        let val = this
        let args = arguments
        /*
        使用这两行代码来获取 this 和 参数
        是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。*/
        if (timeout) {
          clearTimeout(timeout)
        }
        if (immediate) {
          let callNow = !timeout;
          timeout = setTimeout(() => {
            timeout = null
            fn.apply(val, args)
          }, wait)
          if (callNow) { fn.apply(val, args) }
        }else{
          timeout = setTimeout(() => {
            fn.apply(val, args)
          }, wait)
        }
      }

    }
    ipt.oninput = debounce(read, 1000,false)
  </script>
</body>

</html>